<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>地震信息查询</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card class="card1">
      <h4>信息查询</h4>
      <!-- 查询表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        <!-- 时间选项 -->
        <el-form-item label="起始日期">
          <!-- 起始日期 -->
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.startDate"
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <!-- 结束日期 -->
        <el-form-item label="结束日期">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.endDate"
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 卡片视图区2 -->
    <el-card class="card2">
      预测地震
      <!-- 预测表格 -->
      <el-table :data="tableInfo" style="width: 100%" height="500" border stripe>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="location" label="省市区/县" width="500"></el-table-column>
        <el-table-column prop="earthquake_time" label="日期时间" width="300"></el-table-column>
        <el-table-column prop="latitude" label="纬度" width="240"></el-table-column>
        <el-table-column prop="longitude" label="经度" width="240"></el-table-column>
        <el-table-column prop="strength" label="震级" width="240"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import json from "@/assets/json/place.json";
import cityData from "@/assets/json/citydata.js";

export default {
  data() {
    return {
      //获取列表的参数对象
      form: {
        startDate: "",
        endDate: "",
        address: [],
      },

      tableInfo: [],

      cityData,
      // addressRule: [
      //   { required: true, message: "请选择省市区县", trigger: "blur" },
      // ],
    };
  },

  created() {
    // this.getInfo();
  },

  watch: {},

  methods: {
    async onSubmit() {
      this.form.startDate = this.moment(this.form.startDate).format(
        "YYYY-MM-DD"
      );
      this.form.endDate = this.moment(this.form.endDate).format("YYYY-MM-DD");
      const { data: res } = await this.$http.get(
        `/v1.0/earthquake/time/${this.form.startDate}/${this.form.endDate}/`
      );
      this.tableInfo = res.data;
      console.log(res);
    },

    async getInfo() {
      const { data: res } = await this.$http.get("/earthquake");
      //if (res.meta.status !== 200) return this.$message.error('获取信息失败')
      this.tableInfo = res.data;
      this.console.log(res);
    },

    async getData() {
      const _this = this;
      this.$axios.get("/earthquake").then(function (resp) {
        _this.tableInfo = resp.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-cascader {
  width: 46%;
  position: absolute;
  left: 0%;
}
</style>